<template>
	<view class="container" :data-theme="theme">
		<view class="print_header" style="flex: 0 0 auto;">
			<!-- 搜索查询 -->
			<view class="bg_color" style="padding: 24rpx 24rpx;">
				<u-search v-model="keyword" @custom="handleSearch" @search="handleSearch" placeholder="请输入商品名称/关键字"
					actionText="搜索" :actionStyle="{color:'#FFF'}" shape="square" style="flex: none;"></u-search>
			</view>
			<!-- 标签页 -->
			<uni-section>
				<view class="uni-padding-wrap uni-common-mt">
					<uni-segmented-control :current="current" :values="items" :style-type="styleType"
						:active-color="bgColor" @clickItem="onClickItem" />
				</view>
			</uni-section>

			<!-- 仓库，销售状态筛选 -->
			<view style="background-color: #fff;">
				<view style="padding: 0px 30rpx;">
					<view style="flex-flow: row;height: 40px;line-height: 40px;display: flex;justify-content: center;">
						<picker model="selector" @change="invoiceTypeConfirm" range-key="depotName"
							:value="depotPickerIndex" :range="depotDataList" @cancel="cancelPicker"
							style="display: flex;justify-content: center;flex: 1;">
							<view style="display: flex;flex: 1;justify-content: center;"
								:style="{color:depotTypeShow?bgColor:null}" @click="depotTypeShow = true">
								<view style="font-size: 14px;margin-right: 6rpx;">仓库名称</view>
								<u-icon :name="depotTypeShow?'arrow-up-fill':'arrow-down-fill'" size="10"
									:color="depotTypeShow?bgColor:''"></u-icon>
							</view>
						</picker>
						<picker model="selector" @change="salesStatusConfirm" range-key="salesName"
							:value="salesStatuIndex" :range="salesStatusData" @cancel="cancelPicker"
							style="display: flex;justify-content: center;flex: 1;">
							<view style="display: flex;flex: 1;justify-content: center;"
								:style="{color:salesStatusShow?bgColor:null}" @click="salesStatusShow = true">
								<view style="font-size: 14px;margin-right: 6rpx;">销售状态</view>
								<u-icon :name="salesStatusShow?'arrow-up-fill':'arrow-down-fill'" size="10"
									:color="salesStatusShow?bgColor:''"></u-icon>
							</view>
						</picker>
					</view>
				</view>
			</view>
		</view>
		<!-- 内容为空 -->
		<!-- <u-empty class="empty" style="height: 100%;" v-if="!tableData.data.length" mode="data"
			icon="http://cdn.uviewui.com/uview/empty/data.png"></u-empty> -->

		<scroll-view scroll-y="true" :style="{ 'padding-bottom':'20rpx' }" style="height: 100%; overflow: hidden;"
			@scrolltolower="scrolltolowerFn">
			<view class="content">
				<view v-if="current === 0">
					<view v-for="(item, index) in tableData.data" :key="item.id" class="list-item">
						<view>
							<view style="display: flex;">
								<u--image :showLoading="true" :src="item.image" width="80px" height="80px"></u--image>
								<view style="display: flex;flex-flow: column;flex: 1;margin: 6px 6px 0 6px;">
									<text class="u-line-1" style="font-size: 30rpx;"><span
											v-if="item.brandName">[{{item.brandName}}]</span>{{item.name}}</text>
									<view style="margin: 30rpx 0 20rpx 0;padding-bottom: 10rpx;">
										<u--text :text="item.specParam" :size="14"></u--text>
									</view>
									<view style="margin:10rpx 0;border-bottom: 1px solid #f5f5f5"></view>

									<uni-row class="demo-uni-row"
										style="font-size: 28rpx;color: #999;padding: 10rpx 0;text-align: center;">
										<uni-col :span="8">
											<view class="demo-uni-col dark">库存总数</view>
										</uni-col>
										<uni-col :span="8">
											<view class="demo-uni-col dark">已售库存</view>
										</uni-col>
										<uni-col :span="8">
											<view class="demo-uni-col dark">剩余库存</view>
										</uni-col>
									</uni-row>

									<uni-row class="demo-uni-row"
										style="font-size: 30rpx;color: #000;padding: 10rpx 0;text-align: center;">
										<uni-col :span="8">
											<view class="demo-uni-col dark">{{item.allCount ? item.allCount : '0'}}
											</view>
										</uni-col>
										<uni-col :span="8">
											<view class="demo-uni-col dark">{{item.allSell ? item.allSell : '0'}}</view>
										</uni-col>
										<uni-col :span="8">
											<view class="demo-uni-col dark main_color">
												{{item.allRemain ? item.allRemain : '0'}}
											</view>
										</uni-col>
									</uni-row>

								</view>
							</view>
						</view>

						<view class="botton-dom">
							<button class="button_botton" @click="setConsignment(JSON.stringify(item),1)">设为寄售</button>
							<button class="button_botton" @click="toggle(JSON.stringify(item))">库存明细</button>
							<button class="plain_bgColor"
								style="line-height: 64rpx; font-weight: bold;padding: 0 20rpx;"
								@click="goChangeInventory(JSON.stringify(item))">改库存</button>
						</view>
					</view>
				</view>
				<view v-if="current === 1">

					<view v-for="(item, index) in tableData.data" :key="item.id" class="list-item">
						<!-- title -->
						<view>
							<view style="display: flex;">
								<u--image :showLoading="true" :src="item.image" width="80px" height="80px"></u--image>
								<view style="display: flex;flex-flow: column;flex: 1;margin: 6px 6px 0 6px;">
									<text class="u-line-1" style="font-size: 30rpx;font-weight: bold;"><span
											v-if="item.brandName">[{{item.brandName}}]</span>{{item.name}}</text>
									<view style="margin: 30rpx 0;padding-bottom: 10rpx;">
										<u--text :text="item.specParam" :size="14"></u--text>
									</view>
									<view style="margin:10rpx 0;border-bottom: 1px solid #f5f5f5"></view>

									<uni-row class="demo-uni-row"
										style="font-size: 28rpx;color: #999;padding: 10rpx 0;text-align: center;">
										<uni-col :span="8">
											<view class="demo-uni-col dark">库存总数</view>
										</uni-col>
										<uni-col :span="8">
											<view class="demo-uni-col dark">已售库存</view>
										</uni-col>
										<uni-col :span="8">
											<view class="demo-uni-col dark">剩余库存</view>
										</uni-col>
									</uni-row>

									<uni-row class="demo-uni-row"
										style="font-size: 30rpx;color: #000;padding: 10rpx 0;text-align: center;">
										<uni-col :span="8">
											<view class="demo-uni-col dark">{{item.allCount ? item.allCount : '0'}}
											</view>
										</uni-col>
										<uni-col :span="8">
											<view class="demo-uni-col dark">{{item.allSell ? item.allSell : '0'}}</view>
										</uni-col>
										<uni-col :span="8">
											<view class="demo-uni-col dark main_color">
												{{item.allRemain ? item.allRemain : '0'}}
											</view>
										</uni-col>
									</uni-row>
								</view>
							</view>
						</view>

						<view class="botton-dom">
							<button class="button_botton"
								@click="setConsignment(JSON.stringify(item),2)">设为预售</button>
							<button class="button_botton" style="margin-right: 0;"
								@click="toggle(JSON.stringify(item))">库存明细</button>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>

		
		<u-empty v-if="tableData.data.length == 0 " style="background-color: #fff;height: 100%;" mode="data"
			icon="/static/empty/data.png"></u-empty>
		<!-- 上拉加载更多 -->
		<uni-load-more v-else :status="loadMoreStatus"></uni-load-more>


		<view>
			<!-- 普通弹窗 -->
			<tui-drawer mode="bottom" :visible="openInventoryDetail" @close="close2">
				<view class="ensure">
					<view class="title">
						<text @click="openInventoryDetail = false" class="iconfont icon-guanbi5"></text>
						<text>库存明细</text>
						<view style="font-size: 24rpx;font-weight: normal;margin-top: 10rpx;">
							<text>
								<span v-if="depotDedail.brandName">[{{depotDedail.brandName}}]
								</span>{{depotDedail.name}}{{depotDedail.specParam}}</text>
						</view>
					</view>
					<view style="border-bottom: 2rpx solid #f7f7f7;margin: 20rpx;">
						<view style="font-weight: bold;margin: 40rpx 20rpx;">
							所有仓库存合计
							<text style="font-weight: normal;margin-left: 10rpx;">(每日恢复初始库存)</text>
						</view>
						<uni-row class="demo-border-bottom">
							<uni-col :span="6">
								<view class="demo-uni-col dark">库存总数</view>
							</uni-col>
							<uni-col :span="6">
								<view class="demo-uni-col dark">已售库存</view>
							</uni-col>
							<uni-col :span="6">
								<view class="demo-uni-col dark">剩余库存</view>
							</uni-col>
							<uni-col :span="6">
								<view class="demo-uni-col dark">待退库存</view>
							</uni-col>
						</uni-row>
						<uni-row class="demo-border">
							<uni-col :span="6">
								<view class="demo-uni-col dark">
									{{depotDedail.allCount ? depotDedail.allCount : '0'}}
								</view>
							</uni-col>
							<uni-col :span="6">
								<view class="demo-uni-col dark">
									{{depotDedail.allSell ? depotDedail.allSell : '0'}}
								</view>
							</uni-col>
							<uni-col :span="6">
								<view class="demo-uni-col dark">{{depotDedail.allRemain ? depotDedail.allRemain : '0'}}
								</view>
							</uni-col>
							<uni-col :span="6">
								<view class="demo-uni-col dark">未定</view>
							</uni-col>
						</uni-row>
					</view>

					<view style="margin: 20rpx;">
						<view style="font-weight: bold;margin: 30rpx 20rpx;">
							各仓情况
						</view>
						<view class="table-card" v-for="(depot,index) in depotDedail.twoList" :key="index">
							<view style="flex: 3; margin: 20rpx 10rpx;">
								{{depot.depotName}}
								<text>({{depot.inventoryModel == 1?'每日恢复初始库存':'售完即止'}})</text>
							</view>
							<view style="flex: 1; margin: 20rpx 10rpx;">
								已售
								<text style="margin-left: 10rpx;font-weight: bold;color: #000;">
									{{depot.soldInventory ? depot.soldInventory : '0'}}
								</text>
							</view>
							<view style="flex: 1;margin: 20rpx 10rpx;">
								待退库 <text style="margin-left: 10rpx; font-weight: bold;color: #000;">0</text>
							</view>
						</view>
					</view>
					<view style="height: 60rpx;"></view>
				</view>
			</tui-drawer>
		</view>
		<!-- 选择售卖区域 -->
		<view>
			<tui-drawer mode="bottom" :visible="show2" @close="close2">
				<view class="ensure">
					<view class="title">
						<text class="iconfontLeft" @click="show2 = false">取消</text>
						<text>请选择仓库</text>
						<text class="iconfontRight" @click="setConsignInfoModal(num)">确定</text>
					</view>
					<scroll-view class="scroll-Y" scroll-y="true" show-scrollbar="true">
						<view v-if="addCheckboxList.length" class="u-page__checkbox-item" style="margin: 20rpx 40rpx;">
							<checkbox-group class="checke_list" @change="addCheckboxChange">
								<label class="uni-list-cell uni-list-cell-pd checke_item"
									v-for="(ele, index) in addCheckboxList" :key="index">
									<view style="border-bottom: 1px solid #eee;">
										<view class="item_top"
											style="justify-content: space-between;display: flex;padding-bottom: 14rpx;">
											<view class="item_img">
												{{ele.depotName}}
											</view>
											<checkbox :value="JSON.stringify(ele.id)" :iconColor="bgColor"
												class="round-checkbox" />
										</view>
										<view class="item_bottom"
											style="display: flex;justify-content: space-between;margin-bottom: 20rpx;font-size: 24rpx;color: #9e9ea0;">
											<view>
												库存总数 {{ele.totalInventory?ele.totalInventory:'0'}}
											</view>
											<view>
												已售库存 {{ele.soldInventory ? ele.soldInventory:'0'}}
											</view>
											<view>
												剩余库存
												{{ele.totalInventory - ele.soldInventory ? ele.totalInventory - ele.soldInventory : '0'}}
											</view>
										</view>
									</view>
								</label>
							</checkbox-group>
							<view style="height: 50px;"></view>
						</view>

						<u-empty v-if="addCheckboxList.length == 0 " style="background-color: #fff;height: 100%;"
							mode="data" icon="/static/empty/data.png"></u-empty>
					</scroll-view>

				</view>
			</tui-drawer>
		</view>

		<!-- 生态窗组件 -->
		<view>
			<u-modal :show="showInfoModalVision" showCancelButton @confirm="showInfoModalConfirm"
				:content='showInfoModalInfo' @cancel="() => showInfoModalVision = false"></u-modal>
		</view>
	</view>
</template>

<script>
	import tuiDrawer from '@/components/tui-drawer/index.vue';
	import {
		businessQueryGoodsAndDepotApi,
		queryDepotInformationApi,
		changeSaleTypeApi,
		changeSaleTypeTwoApi
	} from '@/api/goodsAndDepot.js';
	import UniSection from '@/components/uni/uni-swipe-action/uni-swipe-action.vue';
	import button from '../../uni_modules/uview-ui/libs/config/props/button';
	import {
		setThemeColor
	} from '../../utils/setTheme';
	let app = getApp();
	export default {
		components: {
			'uni-section': UniSection,
			tuiDrawer
		},
		data() {
			return {
				bgColor: "#ffffff",
				theme: app.globalData.theme,
				tableForm: {
					current: 1,
					size: 10,
					consignPreSale: 0,
				},
				tableData: {
					data: [],
				},
				keyword: "", //搜索商品
				items: ['预售品', '寄售品'],
				current: 0,
				styleType: 'text', //切换按钮
				searchValue: '',
				// -----------库存明细-------------
				depotDedail: {}, //弹窗的仓库值
				openInventoryDetail: false, //库存明细弹窗
				//---
				depotTypeShow: false, //选择仓库下拉框
				invoiceTypeIndex: [0], //默认选择
				depotForm: {
					limit: 10,
					page: 1,
				}, // 查询仓库名称
				depotData: [], //仓库数据
				depotDataList: [],
				depotPickerIndex: 0,
				salesStatusShow: false, //销售状态
				salesStatusData: [{
					salesName: '全部销售状态',
					isShow: 2,
				}, {
					salesName: '销售中',
					isShow: 1,
				}, {
					salesName: '未上架',
					isShow: 0,
				}],
				salesStatuIndex: 0,
				salesStatusIndex: [0], //默认选择
				// -------分页
				totalPage: 1,
				loadMoreStatus: 'more', // 底部状态 noMore loading
				// ------ 改寄售确认弹窗-------------
				showInfoModalVision: false,
				showInfoModalInfo: '确定将该商品设置为寄售品吗？',
				show2: false,
				//横向两端排列形式
				addCheckboxList: [],
				// u-checkbox-group的v-model绑定的值如果设置为某个checkbox的name，就会被默认选中
				addCheckboxValue: [],
				num: '', //1为预售改寄售，2反之
			};
		},
		onLoad() {
			this.bgColor = setThemeColor();
			uni.setNavigationBarColor({
				frontColor: '#ffffff',
				backgroundColor: this.bgColor,
			});
			this.initData();
			this.getDepotList();
		},
		onShow() {
			this.getList();
		},
		created() {
			uni.$on('shopMessageoTherFun', this.initData);
		},
		destroyed() {
			uni.$off('shopMessageoTherFun', this.initData);
		},
		methods: {
			initData() {
				// 首次激活时被调用
				this.tableForm.current = 1;
				this.loadMoreStatus = 'more';
				this.getList();
			},

			// 触底事件 onReachBottom 加载更多数据
			scrolltolowerFn() {
				if (this.loadMoreStatus != 'more') {
					return;
				}
				this.tableForm.current++;
				this.getList(true);
			},
			// 获取城市 id
			getDepotList() {
				queryDepotInformationApi(this.depotForm).then((res) => {
					let depot = res.data.list
					let depotData = depot.map(obj => {
						const {
							createMemberName,
							depotAddress,
							depotTelephone,
							updatedMemberName,
							zoneId,
							...rest
						} = obj; //删除部分属性
						return rest
					}); //要删除的数据的数组
					let addDepotData = [{
						depotId: '',
						depotName: '全部'
					}];
					depotData.unshift(...addDepotData);
					this.depotData.push(depotData)
					this.depotDataList = depotData;
				})
			},
			// 仓库名称选择
			// invoiceTypeConfirm(ele) {
			// 	let list = ele.value[0].depotId;
			// 	if (list == '') {
			// 		delete this.tableForm.depotId;
			// 		this.getList();
			// 		this.depotTypeShow = false;
			// 	} else {
			// 		this.depotTypeShow = false;
			// 		this.tableForm.depotId = list;
			// 		this.getList();
			// 	}
			// },
			invoiceTypeConfirm(ele) {
				let i = ele.detail.value;
				this.depotPickerIndex = i;
				let list = this.depotDataList[i].depotId;
				if (list == '') {
					delete this.tableForm.depotId;
					this.getList();
					this.depotTypeShow = false;
				} else {
					this.depotTypeShow = false;
					this.tableForm.depotId = list;
					this.getList();
				}
			},

			// 销售状态选择
			// salesStatusConfirm(index) {
			// 	let list = index.value[0].isShow;
			// 	if (list == 2) {
			// 		delete this.tableForm.isShow;
			// 		this.getList();
			// 		this.salesStatusShow = false;
			// 	} else {
			// 		this.salesStatusShow = false;
			// 		this.tableForm.isShow = list;
			// 		this.getList();
			// 	}
			// },
			salesStatusConfirm(ele) {
				let i = ele.detail.value;
				this.salesStatuIndex = i;
				let list = this.salesStatusData[i].isShow;
				if (list == 2) {
					delete this.tableForm.isShow;
					this.getList();
					this.salesStatusShow = false;
				} else {
					this.salesStatusShow = false;
					this.tableForm.isShow = list;
					this.getList();
				}
			},
			cancelPicker() {
				this.depotTypeShow = false;
				this.salesStatusShow = false;
			},
			// -----获取数据api-----
			getList(isMerge) {
				let that = this;
				uni.showLoading({
					title: '加载中',
					mask: true
				});
				if (!isMerge) {
					this.tableForm.current = 1;
					this.loadMoreStatus = 'more';
				}
				businessQueryGoodsAndDepotApi(this.tableForm).then((res) => {
					let data = res.data;
					// this.tableData.data = res.data.records; //原
					if (isMerge) {
						this.$util.SplitArray(data.records, that.tableData.data)
					} else {
						that.tableData = res; //原
						that.tableData.data = data.records;
					}
					that.totalPage = data.pages;
					if (data.pages == this.tableForm.current) {
						that.loadMoreStatus = 'noMore';
					}
					uni.hideLoading();
				})
			},
			//预售品设为寄售
			setConsignment(item, num) {
				let data = JSON.parse(item)
				this.addCheckboxList = data.twoList;
				this.num = num;
				this.show2 = true;
			},
			addCheckboxChange(ele) {
				// this.addCheckboxValue = ele;
				let checkboxValue = ele.detail.value;
				this.addCheckboxValue = checkboxValue;
			},
			// 弹窗确认事件
			setConsignInfoModal(num) {
				if (this.addCheckboxValue == '') {
					uni.showToast({
						title: '请选择区域',
						icon: 'error',
						duration: 2000 // 持续时间为 2 秒
					});
					return
				};
				if (num == 1) {
					changeSaleTypeApi(this.addCheckboxValue).then((res) => {
						let code = res.code;
						if (code == 200) {
							uni.showToast({
								title: '提交成功',
								icon: 'success',
								duration: 2000 // 持续时间为 2 秒
							});
							setTimeout(() => {
								this.getList();
							}, 1000)
						} else {
							uni.showToast({
								title: '修改失败',
								icon: 'error',
								duration: 2000 // 持续时间为 2 秒
							});
						}
					})
				} else {
					changeSaleTypeTwoApi(this.addCheckboxValue).then((res) => {
						let code = res.code;
						if (code == 200) {
							uni.showToast({
								title: '提交成功',
								icon: 'success',
								duration: 2000 // 持续时间为 2 秒
							});
							setTimeout(() => {
								this.getList();
							}, 1000)
						} else {
							uni.showToast({
								title: '修改失败',
								icon: 'error',
								duration: 2000 // 持续时间为 2 秒
							});
						}
					})
				}

				this.show2 = false;
			},
			//标签切换
			onClickItem(e) {
				if (this.current !== e.currentIndex) {
					this.current = e.currentIndex
				}
				if (e.currentIndex == 0) {
					this.tableForm.consignPreSale = 0;
					this.getList();
				}
				if (e.currentIndex == 1) {
					this.tableForm.consignPreSale = 1;
					this.getList();
				}
			},
			handleSearch(ele) {
				this.tableForm.query = ele;
				this.getList();
			},

			//库存明细弹窗
			toggle(item) {
				// this.type = 'bottom';
				// // open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
				// this.$refs.popup.open(this.type);
				this.openInventoryDetail = true;
				this.depotDedail = JSON.parse(item);
			},
			//关闭弹窗
			close() {
				this.$refs.popup.close()
			},
			close2() {
				this.show2 = false;
				this.openInventoryDetail = false;
			},
			//去修改库存
			goChangeInventory(ele) {
				let eles = JSON.parse(ele);
				this.goPage('/pages/goodsAndDepot/changeInventory/changeInventory?item=' + JSON.stringify(eles))
			},
			goPage(url) {
				uni.navigateTo({
					url
				})
			},
		}
	}
</script>

<style lang="scss">
	.bg_color {
		@include main_bg_color(theme);
	}

	.main_color {
		@include main_color(theme);
	}

	.plain_bgColor {
		@include main_color(theme);
		// @include main_bg_rgba_color(theme, 0.05);
		border: 1rpx solid $main-color-theme1;
	}

	page {
		display: flex;
		height: 100%;
		flex-direction: column;
		overflow: hidden;

		.container {
			display: flex;
			height: 100%;
			flex-direction: column;
			overflow: hidden;
		}
	}

	.card {
		margin: 20rpx 20rpx 20rpx 20rpx;
		background-color: #fff;
		border-radius: 20rpx;
		padding: 20rpx;
	}

	.botton-dom {
		display: flex;
		margin-top: 20rpx;
		justify-content: end;
		font-size: 24rpx;
		
		.button_botton {
			margin-right: 10px;
			line-height: 64rpx;
			// font-weight: bolder;
			padding: 0 20rpx;
			border: 2rpx solid #dcdcdc;
			color: #606060;
		}
	}

	

	.list-item {
		margin: 24rpx 24rpx 0 24rpx;
		padding: 20rpx;
		background-color: #fff;
		border-radius: 10rpx;
	}

	@mixin height {
		/* #ifndef APP-NVUE */
		height: 100%;
		/* #endif */
		/* #ifdef APP-NVUE */
		flex: 1;
		/* #endif */
	}

	.popup-content {
		text-align: center;
		background-color: #fff;
	}

	.popup-content>text {
		font-size: 30rpx;
		font-weight: bold;
		margin: 20rpx 0;
	}

	.popup-height {
		@include height;
		width: 200px;
	}

	.scroll-Y {
		height: 700rpx;
	}

	.ensure {
		width: 100%;
		background-color: #fff;
		padding-bottom: 22rpx;
		padding-bottom: calc(22rpx+ constant(safe-area-inset-bottom)); ///兼容 IOS<11.2/
		padding-bottom: calc(22rpx + env(safe-area-inset-bottom)); ///兼容 IOS>11.2/

		.title {
			font-size: 30rpx;
			font-weight: bold;
			// background-color: #FFF;
			color: #282828;
			text-align: center;
			// margin: 38rpx 0 36rpx 0;
			padding: 30rpx 0 30rpx 0;
			position: relative;
			// margin: 10rpx;
			border-bottom: 1px solid #f0edf0;

			.iconfont {
				position: absolute;
				right: 30rpx;
				top: 28rpx;
				font-size: 26rpx;
				color: #6b6b6b;
			}

			.iconfontLeft {
				position: absolute;
				left: 30rpx;
				top: 28rpx;
				font-size: 30rpx;
				color: #6b6b6b;
			}

			.iconfontRight {
				position: absolute;
				right: 30rpx;
				top: 28rpx;
				font-size: 30rpx;
				@include main_color(theme);
			}
		}
	}

	.u-demo-block {
		height: 50vh;
		padding: 20px;
	}

	.u-demo-block__title {
		font-size: 16px;
		font-weight: bold;
		display: block;
		text-align: center;
		margin-bottom: 20px;
	}

	.demo-border-bottom {
		font-size: 30rpx;
		color: #999;
		text-align: center;
	}

	.demo-border {
		margin: 20rpx 0 44rpx 0;
		text-align: center;
	}

	.table-card {
		margin: 20rpx;
		padding: 10rpx 0;
		background-color: #f5f5f5;
		border-radius: 10rpx;
		display: flex;
		justify-items: center;
	}

	/deep/ .tui-drawer-container_bottom {
		border-radius: 16rpx 16rpx 0 0;
	}
</style>